<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .a_list> li{
            width: 70px;
            height:70px;
            border:1px solid #f40;
            float: left;
            margin-left: -1px;
        }
        .b_list{
            width: 283px;
            height: 152px;
            border: 1px solid #f40;
            border-top:0px ;
            position: absolute;
            top: 70px;
            left: 0;
            margin-left: -1px;
        }
        .b_list >div{
            width: 100%;
            height:100% ;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .box{
            position: relative;
        }
        .a_listA > div{
            text-align:center ;
            font-size: 12px;
            color: #666;
        }
        .a_listAone{
            margin-top: 13px;
        }
        .b_list1 li{
            float: left;
            font-size: 12px;
            color: #666666;
            margin-left: 23px;
            margin-top: 8px;
        }
        .b_list1 p{
            font-size: 12px;
            color: #666666;
            margin-left:14px;
            font-size: 0px;
        }
        .p1{
            margin-top: 8px;;
            border: 1px solid  #ccc;
            border-bottom:0 ;
            outline: none;
            width: 189px;
            height: 27px;
            background: url("img/benzi.png") no-repeat right;
        }
        .p2{
            border: 1px solid  #ccc;
            outline: none;
            width: 189px;
            height: 27px;
            background: url("img/v.png") no-repeat right;
            margin-bottom:5px ;
        }
        .price{
            margin-left:14px;
            font-size: 15px;
            color: #666666;
            font-size: 14px;
        }
        .price1{
            color: #f40;
            font-weight: bold;
        }
        .liji{
             background-color: #f40;
            border: 0;
            outline: none;
            cursor: pointer;
            color: #fff;
            width: 69px;
            height: 28px;
            border-radius:2px ;
            margin-left:14px;
            display: block;
            margin-top:5px ;
            font-weight: bold;
        }
        .b_list2 li{
            float: left;
            font-size: 14px;
            color: #666666;
            margin-left: 23px;
            margin-top: 8px;
        }
        .p3{
            font-size: 12px;
            color: #666666;
            mrgin-left:14px;
            width: 258px;
            height: 27px;
            margin-left:14px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-bottom: 0;
            outline: none;
            font-size: 12px;

        }
        .spa1{
            width: 128px;
            height: 27px;
            margin-left:14px;
            outline: none;
            color: #666666;
            border: 1px solid #ccc;
            border-right: 0;
            background: url("img/v1.png") no-repeat right;

        }
        .spa2{
            width: 129px;
            height: 27px;
            outline: none;
            color: #666666;
            border: 1px solid #ccc;
            background: url("img/v1.png") no-repeat right;
        }
        .liji1{
            background-color: #f40;
            border: 0;
            outline: none;
            cursor: pointer;
            color: #fff;
            width: 69px;
            height: 28px;
            border-radius:2px ;
            margin-left:14px;
            font-weight: bold;
        }
        .liji1P{
            margin-top: 5px;
        }
        .liji1P >span{
         font-size: 13px;
        color: #666;
            margin-left:6px;
        }
        .b_list3 ul{
            margin-left: 17px;
        }
        .b_list3 li{
            float: left;
            font-size: 12px;
            color: #666666;
            margin-left: 6px;
            margin-top: 8px;
        }
        .dancheng{
            font-size: 13px;
        }
        .radio{
            margin-left: 23px;
        }
        .hongkong{
            font-size: 12px;
            color: #666666;
            margin-left: 28px;
        }
        .chufa{
            background-color: #fff;
            margin-left: 20px;
            width: 40px;
            height:29px;
            color: #cccccc;
            border: 1px solid #ccc;
            font-size: 10px;
            vertical-align: middle;
            outline: none;
        }
        .chengshi{
            width: 67px;
            height: 25px;
            border: 1px solid #ccc;
            vertical-align: middle;
            margin-left: -10px;
            border-left:0 ;
            outline: none;
        }
        .chazao {
            margin-left: 20px;
        }
        .b_list4 li{
            float: left;
            font-size: 12px;
            color: #666666;
            margin-left: 23px;
            margin-top: 8px;
            margin-bottom: 6px;
        }
        #xuanze{
            width: 188px;
            height: 25px;
         outline: none;
            vertical-align: middle;
            margin-left: -9px;
            border: 1px solid #ccc;
            border-bottom:0 ;
            border-left:0 ;
        }
        .remen{
            margin-left: 20px;
            width: 69px;
            height: 25px;
            background-color: #fff;
            border: 1px solid #ccc;
            vertical-align: middle;
            outline: none;
            border-right:0 ;
            border-bottom:0 ;
            color: #666;
        }
        .gongshi{
            margin-left: 20px;
            width: 69px;
            height: 25px;
            background-color: #fff;
            border: 1px solid #ccc;
            vertical-align: middle;
            outline: none;
            border-right:0 ;

            color: #666;
        }
        #xuanze1{
            width: 188px;
            height: 25px;
            outline: none;
            vertical-align: middle;
            margin-left: -9px;
            border: 1px solid #ccc;
            border-left:0 ;
        }
        .baojia{
            background-color: #f40;
            border: 0;
            outline: none;
            cursor: pointer;
            color: #fff;
            width: 69px;
            height: 28px;
            border-radius:2px ;
            margin-left:14px;
            font-weight: bold;
        }
        .anniu{
            margin-top: 18px;
        }
        .kuaisu{
            border: 1px solid #DCDCDC;
            outline: none;
            cursor: pointer;
            color: #3E3E3E;
            width: 69px;
            height: 28px;
            border-radius:2px ;
            margin-left:7px;
            font-weight: bold;
            background-color: #fff;
        }
        .huodong{
            background-color: #fff;
            outline: none;
            cursor: pointer;
            color: #3E3E3E;
            width: 69px;
            height: 28px;
            border: 0;
            border-radius:2px ;
            margin-left:7px;
        }
        .huodong:hover{
            color: #f40;
        }
    </style>
</head>
<body>
<div class="box">
        <ul class="a_list">
            <li haha="0" class="a_listA">
                <div class="a_listAone"><img src="img/pian1.png" alt="haha"/></div>
                <div>充话费
                </div>
            </li>
            <li haha="1" class="a_listA">
                <div class="a_listAone"><img src="img/pian2.png" alt="haha"/></div>
                <div>游戏</div>
            </li>
            <li haha="2" class="a_listA">
                <div class="a_listAone"><img src="img/pian3.png" alt="haha"/></div>
                <div>旅行</div>
            </li>
            <li haha="3" class="a_listA">
                <div  class="a_listAone"><img src="img/pian4.png" alt="haha"/></div>
                <div>车险</div>
            </li>
        </ul>
        <div class="b_list">
            <div class="b_list1">
                <ul>
                    <li>充话费
                    </li>
                    <li>充流量</li>
                    <li>充固话</li>
                    <li>充宽带</li>
                </ul>
                <p><input type="text" placeholder="请输入手机号码"class="p1"></p>
                <p><input type="text" value="50元" class="p2"/></p>
                    <span class="price">售价 ¥</span>
                    <span class="price1">49—49.8</span>
                    <button class="liji">立即充值</button>

            </div>


            <div class="b_list2">
                <ul >
                    <li>点卡</li>
                    <li>QQ</li>
                </ul>
                <input type="text"   placeholder="请输入QQ号码" class="p3">
                    <input type="text" class="spa1"  placeholder="Q币"/><input type="text" value="5个" class="spa2"/>
                <span class="price">¥</span>
                <span class="price1">4.76</span>
                <p class="liji1P"><button class="liji1">立即充值</button><span>更多精彩，尽在淘宝游戏！</span></p>

            </div>
            <div class="b_list3">
                <ul>
                    <li>国内机票</li>
                    <li>国际机票</li>
                    <li>酒店客栈</li>
                    <li>度假门票</li>
                    <li>火车票</li>
                </ul>
                <p>
                    <input type="radio" class="radio"/><span class="dancheng">单程</span>
                    <input type="radio"/><span  class="dancheng">往返</span>
                    <span class="hongkong">港澳台请选择国际机票</span>
                </p>
                <button class="chufa">出发</button>
                <input type="text" class="chengshi" placeholder="城市"/>
                <button class="chufa">到达</button>
                <input type="text" class="chengshi" placeholder="城市"/>
                <button class="chufa">出发</button>
                <input type="text" class="chengshi" placeholder="日期"/>
                <button class="liji chazao">查找</button>
            </div>
            <div class="b_list4">
                <ul>
                    <li>车险</li>
                    <li>意外险</li>
                    <li>健康险</li>
                    <li>旅行险</li>
                    <li>财产险</li>
                </ul>
                <button class="remen">热门城市</button>
                <select name="" id="xuanze" >
                    <option value="">请选择城市</option>
                </select>
                <button class="gongshi">保险公司</button>
                <select name="" id="xuanze1" >
                    <option value="">人保车险</option>
                </select>
                <div class="anniu">
                    <button class=" baojia">立刻报价</button>
                    <button class="kuaisu">快速续保</button>
                    <button class="huodong">车险活动</button></div>

            </div>
        </div>
</div>
<script>
    var alist=document.getElementsByClassName("a_list"),
          alistL=alist[0].getElementsByTagName("li");
    var blist=document.getElementsByClassName("b_list")[0];
    for(var i=0;i<alistL.length;i++){
        alistL[i].onmouseover=function(){
            for(var j=0;j<alistL.length;j++){
                alistL[j].style.border="1px solid #eee";
                alistL[j].style.borderBottom="1px solid #f40";
                blist.getElementsByTagName("div")[j].style.display="none";
            }
            console.log(this);
            this.style.border="1px solid #f40";
            this.style.borderBottom="1px solid transparent";
            var nun=this.getAttribute("haha");
            blist.getElementsByTagName("div")[nun].style.display="block";
           if(alistL[parseInt(nun)+1]) alistL[parseInt(nun)+1].style.borderLeft="1px solid #f40";
        }
    }


</script>
</body>
</html>